<template>
    <div class="home-main">
        <Row :gutter="10">
            <Col :md="24" :lg="8">
                <Row class-name="home-page-row1" :gutter="10">
                    <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
                        <Card>
                            <Row type="flex" class="user-infor">
                                <Col span="8">
                                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                                        <Avatar icon="ios-person" :src="user.avatar || avatar" :size="80" />
                                    </Row>
                                </Col>
                                <Col span="16" style="padding-left:6px;">
                                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                                        <div>
                                            <b class="card-user-infor-name">{{ user.realname }}</b>
                                            <p>角色：{{ user.role ? user.role.name : '' }}</p>
                                        </div>
                                    </Row>
                                </Col>
                            </Row>
                            <div class="line-gray"></div>
                            <div style="line-height: 22px;">
                                <p>上次登录时间：{{ user.login_time }}</p>
                                <p>上次登录地点：{{ user.login_ip_region }}</p>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </Col>
            <Col :md="24" :lg="16">
                <Card>
                    <Row :gutter="5" :style="{marginBottom: '10px'}">
                        <Col :xs="24" :sm="12" :md="6">
                            <Row type="flex" align="middle" justify="center">
                                <count-up id-name="today_1" color="#2d8cf0" intro-text="今日售票额" :end-val="counts.today_amount" />
                            </Row>
                        </Col>
                        <Col :xs="24" :sm="12" :md="6">
                            <Row type="flex" align="middle" justify="center">
                                <count-up id-name="today_2" color="#64d572" intro-text="今日服务费" :end-val="counts.today_platform_fee" />
                            </Row>
                        </Col>
                        <Col :xs="24" :sm="12" :md="6">
                            <Row type="flex" align="middle" justify="center">
                                <count-up id-name="today_3" color="#ff2db2" intro-text="今日售票数" :end-val="counts.today_nums" />
                            </Row>
                        </Col>
                        <Col :xs="24" :sm="12" :md="6">
                            <Row type="flex" align="middle" justify="center">
                                <count-up id-name="today_4" color="#ffd572" intro-text="今日新用户" :end-val="counts.today_users" />
                            </Row>
                        </Col>
                    </Row>
                </Card>
                <Card style="margin-top: 10px;">
                    <Row :gutter="5" :style="{marginBottom: '10px'}">
                        <Col :xs="24" :sm="12" :md="6">
                            <Row type="flex" align="middle" justify="center">
                                <count-up id-name="yesterday_1" color="#a1a1a1" intro-text="昨日售票额" :end-val="counts.yesterday_amount" />
                            </Row>
                        </Col>
                        <Col :xs="24" :sm="12" :md="6">
                            <Row type="flex" align="middle" justify="center">
                                <count-up id-name="yesterday_2" color="#a1a1a1" intro-text="昨日服务费" :end-val="counts.yesterday_platform_fee" />
                            </Row>
                        </Col>
                        <Col :xs="24" :sm="12" :md="6">
                            <Row type="flex" align="middle" justify="center">
                                <count-up id-name="yesterday_3" color="#a1a1a1" intro-text="昨日售票数" :end-val="counts.yesterday_nums" />
                            </Row>
                        </Col>
                        <Col :xs="24" :sm="12" :md="6">
                            <Row type="flex" align="middle" justify="center">
                                <count-up id-name="yesterday_4" color="#a1a1a1" intro-text="昨日新用户" :end-val="counts.yesterday_users" />
                            </Row>
                        </Col>
                    </Row>
                </Card>
            </Col>
        </Row>
        <div class="margin-top-5">
            <Card style="margin-top: 10px;">
                <Row :gutter="5" :style="{marginBottom: '10px'}">
                    <Col :xs="24" :sm="12" :md="3">
                        <Row type="flex" align="middle" justify="center">
                            <a href="javascript:void(0)" @click="route(1)">
                                <Card>
                                    <count-up id-name="todo_1" color="#ad8ef0" intro-text="退款待审核" :end-val="counts.todo_refund" />
                                </Card>
                            </a>
                        </Row>
                    </Col>
                    <Col :xs="24" :sm="12" :md="3">
                        <Row type="flex" align="middle" justify="center">
                            <a href="javascript:void(0)" @click="route(2)">
                                <Card>
                                    <count-up id-name="todo_2" color="#2d8cf0" intro-text="直售待发货" :end-val="counts.todo_direct_delivery" />
                                </Card>
                            </a>
                        </Row>
                    </Col>
                    <Col :xs="24" :sm="12" :md="3">
                        <Row type="flex" align="middle" justify="center">
                            <a href="javascript:void(0)" @click="route(3)">
                                <Card>
                                    <count-up id-name="todo_3" color="#3dbcf0" intro-text="代拍待发货" :end-val="counts.todo_agent_delivery" />
                                </Card>
                            </a>
                        </Row>
                    </Col>    
                    <Col :xs="24" :sm="12" :md="3">
                        <Row type="flex" align="middle" justify="center">
                            <a href="javascript:void(0)" @click="route(4)">
                                <Card>
                                    <count-up id-name="todo_4" color="#64d572" intro-text="纸质票审核" :end-val="counts.todo_paper" />
                                </Card>
                            </a>
                        </Row>
                    </Col>
                    <Col :xs="24" :sm="12" :md="3">
                        <Row type="flex" align="middle" justify="center">
                            <a href="javascript:void(0)" @click="route(5)">
                                <Card>
                                    <count-up id-name="todo_5" color="#ff2db2" intro-text="电子票审核" :end-val="counts.todo_ticketing" />
                                </Card>
                            </a>
                        </Row>
                    </Col>
                    <Col :xs="24" :sm="12" :md="4">
                        <Row type="flex" align="middle" justify="center">
                            <a href="javascript:void(0)" @click="route(6)">
                                <Card>
                                    <count-up id-name="todo_6" color="#ffd572" intro-text="余额提现" :end-val="counts.todo_balance" />
                                </Card>
                            </a>
                        </Row>
                    </Col>
                    <Col :xs="24" :sm="12" :md="3">
                        <Row type="flex" align="middle" justify="center">
                            <a href="javascript:void(0)" @click="route(7)">
                                <Card>
                                    <count-up id-name="todo_7" color="#bad572" intro-text="保证金提现" :end-val="counts.todo_deposit" />
                                </Card>
                            </a>
                        </Row>
                    </Col>
                </Row>
            </Card>
        </div>
        <div class="margin-top-5">
            <Row :gutter="5">
                <Col :md="24" :lg="8">
                    <Card>
                        <div class="line-chart-con" style="margin-top:20px">
                            <top-sales-amount :datas="dataTopSalesAmount"></top-sales-amount>
                        </div>
                    </Card>
                </Col>
                <Col :md="24" :lg="8">
                    <Card>
                        <div class="line-chart-con" style="margin-top:20px">
                            <top-sales-partner :datas="dataTopSalesPartner"></top-sales-partner>
                        </div>
                    </Card>
                </Col>
                <Col :md="24" :lg="8">
                    <Card>
                        <div class="line-chart-con" style="margin-top:20px">
                            <top-registration :datas="dataTopRegistration"></top-registration>
                        </div>
                    </Card>
                </Col>
            </Row>
        </div>
        <div class="margin-top-10">
            <Card>
                <div class="filter-bar">
                    <RadioGroup v-model="filter.type" type="button" button-style="solid" @on-change="handleChangeType">
                        <Radio label="days">按日</Radio>
                        <Radio label="month">按月</Radio>
                        <Radio label="year">按年</Radio>
                        <Radio label="custom">自定义</Radio>
                    </RadioGroup>
                    <span v-if="filter.type === 'custom'" style="margin-left: 10px;">日期：</span>
                    <DatePicker v-if="filter.type === 'custom'" v-model="filter.dates" type="daterange" separator=" 至 " style="width: 198px" @on-change="handleChangeDate"></DatePicker>
                </div>

                <div class="line-chart-con" style="margin-top:20px">
                    <service-requests :datas="dateAnalysis"></service-requests>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import serviceRequests from './components/serviceRequests.vue';
import countUp from './components/countUp.vue';
import avatar from '../../assets/images/avatar.png';
import topSalesAmount from './components/topSalesAmount.vue';
import topSalesPartner from './components/topSalesPartner.vue';
import topRegistration from './components/topRegistration.vue';
export default {
    name: 'home',
    components: {
        serviceRequests,
        countUp,
        topSalesAmount,
        topSalesPartner,
        topRegistration
    },
    data() {
        return {
            user: {},
            avatar: avatar,
            filter: {
                type: 'days',
                dates: []
            },
            counts: {
                todo_refund: 0,
                todo_direct_delivery: 0,
                todo_agent_delivery: 0,
                todo_paper: 0,
                todo_ticketing: 0,
                todo_balance: 0,
                todo_deposit: 0,
                today_amount: 0,
                today_platform_fee: 0,
                today_nums: 0,
                today_users: 0,
                yesterday_amount: 0,
                yesterday_platform_fee: 0,
                yesterday_nums: 0,
                yesterday_users: 0
            },
            dateAnalysis: [],
            dataTopSalesAmount: [],
            dataTopSalesPartner: [],
            dataTopRegistration: [],
        };
    },
    mounted() {
        this.user = JSON.parse(Cookies.get('user'));
        this.init();
    },
    methods: {
        init() {
            // 今日数据
             this.$ajax.post('/common/statistics/homepage', {}).then(res => {
                this.counts.todo_refund = res.todo.refund;
                this.counts.todo_direct_delivery = res.todo.direct_delivery;
                this.counts.todo_agent_delivery = res.todo.agent_delivery;
                this.counts.todo_paper = res.todo.paper;
                this.counts.todo_ticketing = res.todo.ticketing;
                this.counts.todo_balance = res.todo.balance;
                this.counts.todo_deposit = res.todo.deposit;
                this.counts.today_amount = Number(res.today.amount);
                this.counts.today_platform_fee = Number(res.today.platform_fee);
                this.counts.today_nums = Number(res.today.nums);
                this.counts.today_users = Number(res.today.users);
                this.counts.yesterday_amount = Number(res.yesterday.amount);
                this.counts.yesterday_platform_fee = Number(res.yesterday.platform_fee);
                this.counts.yesterday_nums = Number(res.yesterday.nums);
                this.counts.yesterday_users = Number(res.yesterday.users);
                
            }).catch(() => {
                // todo
            }) 
            // 近30日数据
            const { filter } = this;
            let params = {};
            if(filter.type === 'custom') {
                if(filter.dates.length > 0 && filter.dates[0]) {
                    params.start_date = filter.dates[0];
                    params.end_date = filter.dates[1];
                }
            }else{
                params.type = filter.type;
            }
            this.$ajax.post('/common/statistics/business_analysis', params).then(res => {
                this.dateAnalysis = res || [];
            }).catch(() => {
                // todo
            }) 
            //售票额top5
            this.$ajax.post('/common/statistics/top_sales_amount', params).then(res => {
                this.dataTopSalesAmount = res || [];
            }).catch(() => {
            }) 
            //售票数top5
            this.$ajax.post('/common/statistics/top_sales_partner', params).then(res => {
                this.dataTopSalesPartner = res || [];
            }).catch(() => {
            }) 
            //缺货登记top5
            this.$ajax.post('/common/statistics/top_registration', params).then(res => {
                this.dataTopRegistration = res || [];
            }).catch(() => {
            }) 
        },
        handleChangeType(value) {
            if(value !== 'custom') {
                this.filter.dates = [];
                this.init();
            }
        },
        handleChangeDate() {
            this.init();
        },
        route(type) {
            if (type == 1){
                this.$router.push({name: 'order_refund', query: {apply_status: 0}});
            }
            if (type == 2){
                this.$router.push({name: 'order_index', query: {status: 3}});
            }
            if (type == 3){
                this.$router.push({name: 'order_agent_index', query: {status: 3}});
            }
            if (type == 4){
                this.$router.push({name: 'order_delivery', query: {status: 0}});
            }
            if (type == 5){
                this.$router.push({name: 'order_ticketing', query: {status: 0}});
            }
            if (type == 6){
                this.$router.push({name: 'partner_balance_withdrawal', query: {status: 0}});
            }
            if (type == 7){
                this.$router.push({name: 'partner_deposit_withdrawal', query: {status: 0}});
            }
        }
    }
};
</script>

<style lang="less" scoped>
.user-infor, .made-child-con-middle {
    height: 135px;
}
.card-user-infor-name{
    font-size: 2em;
    color: #2d8cf0;
}
.line-chart-con {
    height: 320px;
}
.line-gray {
    margin-bottom: 10px;
    height: 1px;
    background-color: #ddd;
}
</style>